<template>
  <input type="text" v-model="keyword">
  <h3>{{keyword}}</h3>
</template>
<script>
  // 使用vue提供的ref，其中ref就是精装修、customRef就是毛坯房
  import { ref, customRef } from 'vue';

  export default {
    name: 'App',
    setup() {
      // 使用vue提供的ref
      // let keyword = ref('hello');

      // 自定义ref 其实就是一个函数
      // 自定义一个ref，名称为：commonRef
      function commonRef(value) {
        // 自定义ref实现逻辑，customRef必须返回一个对象
        return customRef((track, trigger) => {
          let timmer;// 定时器每次使用完毕都要清除掉
          // 该return 是customRef 要求返回的一个对象
          return {
            get() {
              // console.log('读取数据，get方法被调用');
              console.log(`有人从commonRef 这个容器中读取数据了，我把${value}给他了！`);
              track(); // 数据追踪，修改数据的话，通知Vue追踪数据的变化
              // （提前和get商量一下，让他认为这个value是有用的）
              return value;
            },
            set(newValue) {
              // console.log('修改数据，set方法被调用');
              console.log(`有人把commonRef 这个容器中数据修改了:${newValue}！`);
              value = newValue;

              // 清除定时器
              clearTimeout(timmer);

              // 自定义延时时间
              timmer = setTimeout(() => {
                trigger();// 通知Vue重新解析模板，trigger代表是触发器
              }, 1000);
            }
          }
        });
      }

      // 使用程序员自定义的ref
      let keyword = commonRef('hello');


      return {
        keyword
      }
    }

  }
</script>